<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 300px;
        width: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box">
      <h1 id="num"></h1>
    </div>
  </body>
  <script>
    /* 
防抖：如果一段时间内 频繁的发生 以最后一次为准
节流：如果一段时间时间内容 频繁发生 按照一定的时间规律执行
*/
    let num = 0;
    document.getElementById("box").addEventListener("mousemove", function () {
      // 防抖
      //   debounce(function () {
      //     document.getElementById("num").innerHTML = num++;
      //   }, 1000);
      // 节流
      throttle(function () {
        document.getElementById("num").innerHTML = num++;
      }, 1000);
    });
    /* 
    防抖函数
*/
    // duration 1000s
    // function debounce(fn, duration) {

    //   if (window.timeId) {
    //     clearTimeout(window.timeId);
    //     window.timeId = null;
    //   }
    //   window.timeId = setTimeout(fn, duration);
    // }
    /* 节流 规律执行 */
    function throttle(fn, duration) {
      if (!window.timeId) {
        window.timeId = setTimeout(function () {
          window.timeId = null;
          fn.call(this);
        }, duration);
      }
      
    }
  </script>
</html>
